<!DOCTYPE HTML>
<html>
	<head>
		<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>区域掩模</title>
		<style>
			body,
			html,
			#container {
				margin: 0;
				width: 100%;
				height: 100%
			}

			.amap-logo {
				display: none; //去掉高德地图logo
			}

			.amap-copyright {
				opacity: 0; //去掉高德的版本号
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script>
			window._AMapSecurityConfig = {
				securityJsCode: 'd52e662b3da181d922ae7d0939be19ff',
			}
		</script>
		<script language="javascript"
			src="https://webapi.amap.com/maps?v=1.4.15&key=d3b6464934c87bbb494d6fff68ba8ab4&plugin=AMap.DistrictSearch">
		</script>
		<script language="javascript">
			var opts = {
				subdistrict: 0,
				extensions: 'all',
				level: 'city'
			};
			//利用行政区查询获取边界构建mask路径
			//也可以直接通过经纬度构建mask路径
			function getParams(key) {
			    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)"); 
			   //如果地址栏中出现中文则进行编码    
			    var r = encodeURI(window.location.search).substr(1).match(reg);  
			    if (r != null) {  
			        //将中文编码的字符重新变成中文
			        return decodeURI(unescape(r[2]));  
			    }  
			    return null;  
			};
			const newName = getParams('name')
			console.log(newName)
			var district = new AMap.DistrictSearch(opts);
			
			// district.search('北京市', function(status, result) {
			// 	console.log(status)
			// 	var bounds = result.districtList[0].boundaries;
			// 	console.log(result)
			// 	var mask = []
			// 	for (var i = 0; i < bounds.length; i += 1) {
			// 		mask.push([bounds[i]])
			// 	}
			// 	var map = new AMap.Map('container', {
			// 		mask: mask,
			// 		center: [116.472804,39.995725],
			// 		disableSocket: false,
			// 		viewMode: '3D',
			// 		showLabel: true,
			// 		labelzIndex: 130,
			// 		pitch: 40,
			// 		zoom: 9,
			// 		layers: [
			// 			new AMap.TileLayer.RoadNet({
			// 				// rejectMapMask:true
			// 			}),
			// 			new AMap.TileLayer.Satellite(),
			// 			// var satellite = new AMap.TileLayer.Satellite();
			// 			//    var roadNet = new AMap.TileLayer.RoadNet();
			// 		]
			// 	});
			// 	// var maskerIn = new AMap.Marker({
			// 	//     position:[116.501415,39.926055],
			// 	//     map:map
			// 	// })
			// 	// var maskerOut = new AMap.Marker({//区域外的不会显示
			// 	//     position:[117.001415,39.926055],
			// 	//     map:map
			// 	// })
			// 	//添加高度面
			// 	var object3Dlayer = new AMap.Object3DLayer({
			// 		zIndex: 1
			// 	});
			// 	map.add(object3Dlayer)
			// 	var height = -8000;
			// 	var color = '#55ffffcc'; //rgba
			// 	var wall = new AMap.Object3D.Wall({
			// 		path: bounds,
			// 		height: height,
			// 		color: color
			// 	});
			// 	wall.transparent = true
			// 	object3Dlayer.add(wall)
			// 	//添加描边
			// 	for (var i = 0; i < bounds.length; i += 1) {
			// 		new AMap.Polyline({
			// 			path: bounds[i],
			// 			strokeColor: '#99ffff',
			// 			strokeWeight: 4,
			// 			map: map
			// 		})
			// 	}
			// });
			// [{name:'贵阳市',value:[106.636577,26.653325]},
			// 		{name:'六盘水市',value:[105.483429,26.219214]},
			// 		{name:'安顺市',value:[105.954417,26.259252]},
			// 		{name:'遵义市',value:[107.037923,27.728325]},
			// 		{name:'毕节市',value:[105.298589,27.290215]},
			// 		{name:'铜仁市',value:[109.196439,27.737786]},
			// 		{name:'黔南布依族苗族自治州',value:[107.525404,26.266118]},
			// 		{name:'黔西南布依族苗族自治州',value:[104.902461,25.098113]},
			// 		{name:'黔东南苗族侗族自治州',value:[108.822481,27.179902]},]
			
			let ans
			district.search('安顺市', function(status, result) {
				console.log(result)
				ans = result.districtList[0].boundaries;
			});
					
			let gy
			district.search('贵阳', function(status, result) {
				console.log(result)
				gy = result.districtList[0].boundaries;
			});
			
			
			let lps
			district.search('六盘水市', function(status, result) {
				console.log(result)
				lps = result.districtList[0].boundaries;
			});
			
			let bj
			district.search('毕节市', function(status, result) {
				console.log(result)
				bj = result.districtList[0].boundaries;
			});
			
			
			
			let zy
			district.search('遵义市', function(status, result) {
				console.log(result)
				zy = result.districtList[0].boundaries;
			});
			
			let tr
			district.search('铜仁市', function(status, result) {
				console.log(result)
				tr = result.districtList[0].boundaries;
			});
			
			let qlb
			district.search('黔南布依族苗族自治州', function(status, result) {
				console.log(result)
				qlb = result.districtList[0].boundaries;
			});
			
			let qxl
			district.search('黔西南布依族苗族自治州', function(status, result) {
				console.log(result)
				qxl = result.districtList[0].boundaries;
			});
			
			let qdl
			district.search('黔东南苗族侗族自治州', function(status, result) {
				console.log(result)
				qdl = result.districtList[0].boundaries;
			});
			
			var map = null
			
			creat('贵州省')
			let t = 1
			function creat(reals){
				district.search(reals, function(status, result) {
					var bounds = result.districtList[0].boundaries;
					console.log(result)
					var center = [result.districtList[0].center.Q,result.districtList[0].center.R]
					console.log(center)
					var mask = []
					for (var i = 0; i < bounds.length; i += 1) {
						mask.push([bounds[i]])
					}
					map = new AMap.Map('container', {
						mask: mask,
						center: [106.636577,26.653325],
						
						disableSocket: false,
						viewMode: '3D',
						showLabel: true,
						labelzIndex: 130,
						pitch: 40,
						zoom: 7,
						layers: [
							new AMap.TileLayer.RoadNet({
								// rejectMapMask:true
							}),
							new AMap.TileLayer.Satellite(),
							// var satellite = new AMap.TileLayer.Satellite();
							//    var roadNet = new AMap.TileLayer.RoadNet();
						]
					});
					//区域绘制
					 var polygon = new AMap.Polygon({
					         map: map,
					         fillOpacity:0.5,
					         path: gy,
							 name:'贵州'
					 });
					 
					 var polygon2 = new AMap.Polygon({
					         map: map,
					         fillOpacity:0.3,
					         path: lps,
							 name:'六盘水'
					 });
					 
					 var polygon3 = new AMap.Polygon({
					         map: map,
					         fillOpacity:0.3,
					         path: bj
					 });
					 
					 var polygon4 = new AMap.Polygon({
					         map: map,
					         fillOpacity:1,
					         path: ans
					 });
					 var polygon5 = new AMap.Polygon({
					         map: map,
					         fillOpacity:0.3,
					         path: zy
					 });
					 var polygon6 = new AMap.Polygon({
					         map: map,
					         fillOpacity:0.3,
					         path: tr
					 });
					 var polygon7 = new AMap.Polygon({
					         map: map,
					         fillOpacity:0.3,
					         path: qlb
					 });
					 var polygon8 = new AMap.Polygon({
					         map: map,
					         fillOpacity:0.3,
					         path: qxl
					 });
					 var polygon9 = new AMap.Polygon({
					         map: map,
					         fillOpacity:0.3,
					         path: qdl,
							 // name:'黔东南苗族侗族自治州'
					 });
					 
					 
					 // setTimeout(function() {
						//   map && map.destroy();
					 // }, 3000);
					 
					 polygon.on('click',function(e){
					 	destroyMap()
						
						if(t === 1){
							t++
							setTimeout(function() {
								creat('贵阳')
							}, 1000);
						}else{
							setTimeout(function() {
								creat('开阳县')
							}, 1000);
						}
						
					 })
					 
					 // let pooo = [gy,lps,bj,ans,zy,tr,qlb,qxl,qdl]
					 
					 var lnglats = [[106.636577,26.653325],[105.483429,26.219214]];
					 var markers = [];
					 for (var i = 0; i < lnglats.length; i++) {
					     var lnglat = lnglats[i];
					     // 创建点实例
					     var marker = new AMap.Marker({
					         position: new AMap.LngLat(lnglat[0], lnglat[1]),
					         icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b' + (i + 1) + '.png',
					         extData: {
					             id: i + 1
					         }
					     });
					 
					     markers.push(marker);
						 
					 }
					 var overlayGroups = new AMap.OverlayGroup(markers);
					// marker.on('click', this.markerClick)
					let marer = map.add(overlayGroups);
					overlayGroups.on('click',function(e){
						console.log(e.target.De.extData.id)
					})
					//添加高度面
					var object3Dlayer = new AMap.Object3DLayer({
						zIndex: 1
					});
					map.add(object3Dlayer)
					var height = -8000;
					var color = '#55ffffcc'; //rgba
					var wall = new AMap.Object3D.Wall({
						path: bounds,
						height: height,
						color: color
					});
					wall.transparent = true
					object3Dlayer.add(wall)
					//添加描边
					for (var i = 0; i < bounds.length; i += 1) {
						new AMap.Polyline({
							path: bounds[i],
							strokeColor: '#99ffff',
							strokeWeight: 4,
							map: map
						})
					}
				});
			}
			 
			// function addMarker() {
			//         marker = new AMap.Marker({
			//             icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
			//             position: [106.636577,26.653325],
			//             offset: new AMap.Pixel(-13, -30)
			//         });
			//         marker.setMap(map);
			//     }
			
			// addMarker()
			 function destroyMap() {
			      map && map.destroy();
			      // log.info("地图已销毁");
			    }
		</script>
	</body>
</html>
